<template>
<!--备案-->
<public-dialog
     title="备案"
     width="50%"
     v-model:visible="visible"
     confirm-button-title="提交"
     @on-confirm="onConfirm"
>
    <template #default>
      <el-form
         ref="formRef"
        :model="form"
        :rules="rules"
      >
          <el-form-item label="备案材料" prop="urlKeys">
              <FileMinioUpload
                  :restriction="true"
                  :restrictionLimit="5"
                  v-model:files="form.urlKeys"
              />
          </el-form-item>
          <el-form-item label="描述" prop="referenceRemark">
              <el-input
                      v-model="form.referenceRemark"
                      :maxlength="200"
                      show-word-limit
                      :rows="7"
                      type="textarea"
                      placeholder="请输入描述"
              />
          </el-form-item>
      </el-form>
    </template>
</public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog";
import {reactive, ref} from "vue";
import {ElMessage, ElForm, ElFormItem, ElLoading} from "element-plus";
import {programmeManagementApi, reserveInvestmentProjectLibraryApi} from "@/api/investment";
import FileMinioUpload from "@/components/FileMinioUpload.vue";

const visible = ref(false);

const form = reactive({
    planId:'',
    urlKeys:[],
    referenceRemark:'',
    projectId:'',
});

const rules  = reactive({
    urlKeys: [
        { required: true, message: '请上传备案材料', trigger: 'change' }
    ],
    referenceRemark:[
        { required: true, message: '请输入描述', trigger: 'blur' }
    ],
});

/**
 * el-upload 选择文件后的事件
 * @param file
 */
const uploadFile =async (file) => {
    let loading = null;
    try{
        loading = ElLoading.service({
            lock: true,
            text: '上传文件中...',
            background: 'rgba(0, 0, 0, 0.7)',
        });
        let uploadFile = new FormData();
        uploadFile.append("file",file.file);
        const res = await reserveInvestmentProjectLibraryApi.upload(uploadFile);
        if(res.code == 200){
            form.urlKeys.push(res.data);
            loading.close();
        }
    }catch (e) {
        loading.close();
        ElMessage.warning('文件上传失败!');
    }

}

/**
 * 文件移除
 */
const onRemove = (e) => {
    console.log('e',e.name);
    form.urlKeys.forEach((item,index)=>{
        console.log('item.split(\'/\')[item.split(\'/\').length-1]',item.split('/')[item.split('/').length-1])
        console.log('name',e.name)
        if(item.split('-')[item.split('-').length-1] === e.name){
            form.urlKeys.splice(index,1);
        }
    });
};

/**
 * 提交备案
 * @param param
 */
const submitReference = (param,callback) => {
    programmeManagementApi.submitReference(param).then(res=>{
        if(res.code == 200){
          if(callback)callback();
        }
    });
}

/**
 * 确认并提交
 */
const emits = defineEmits(['onSuccess'])
const formRef = ref(null);
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            submitReference(form,()=>{
                visible.value = false;
                ElMessage.success('提交备案成功!');
                emits('onSuccess');
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 打开弹窗
 * @param row
 */
const open = (row) => {
  form.planId = row.planId;
  form.projectId = row.projectId;
  visible.value = true;
}

/**
 * 关闭
 */
const close = () => {
  visible.value = false;
}

defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.upload-icon{
  width: 18px;
  height: 18px;
}
.tip{
  font-size: 12px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
}
</style>
